<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!-- 

阅读并理解一下代码，根据功能补充代码实现简易的vue3响应式系统


-->
<script>
    // 1. 创建一个简单的Vue3响应式系统  
    function reactive(data) {
        return new Proxy(data, {
            get(target, key) {
                console.log('get:' + key);

                return target[key]

            },
            set(target, key, value) {
                console.log('set:' + key + '/' + value);
                target[key] = value;
                // 通知视图更新
                updateView(target, key, value);
                // 收集有哪些地方用到了这个变量（收集依赖）
                return true;
            }
        });
    }

    // 2. 创建一个视图渲染函数  
    function updateView(data, key, value) {
        const element = document.getElementById(key);
        if (element) {
            element.innerText = value;
        }
    }

    // 3. 使用响应式系统和视图渲染函数创建一个简单的Vue3应用程序  
    const appData = reactive({ name: 'Vue3' });

    // 初始渲染  
    updateView(appData, 'name', appData.name);

    // 设置一个定时器，模拟数据变更  
    setInterval(() => {
        appData.name = 'Vue3 - ' + new Date().getSeconds();
    }, 5000);
</script>

</html>